/*
 * @Author: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @Date: 2022-10-26 15:43:53
 * @LastEditors: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @LastEditTime: 2022-10-29 14:42:48
 * @FilePath: \echart-use\vue-echarts\src\utils\socket_service.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
export default class SocketService {
    /**
     * 单例
     */
    static instance = null
    static get Instance () {
      if (!this.instance) {
        this.instance = new SocketService()
      }
      return this.instance
    }

    // 和服务器连接的socket对象
    ws = null
    // 记录重试发送的次数
    sendRetryCount = 0
    // 记录尝试连接的次数
    connectRetryCount = 0
    // 标识是否连接服务端成功
    connected = false
    // 存储回调函数
    callBackMapping = {}

    // 定义连接服务器的方法
    connect () {
      if (!window.WebSocket) {
        return console.log('你的浏览器不支持websocket')
      }
      this.ws = new WebSocket('ws://localhost:9998')

      // 连接成功的事件
      this.ws.onopen = () => {
        console.log('连接服务端成功')
        this.connected = true
        this.connectRetryCount = 0
      }
      // 连接服务端失败
      this.ws.onclose = () => {
        console.log('连接服务端失败')
        this.connected = false
        this.connectRetryCount++
        // 设置不断重连
        setTimeout(() => {
          this.connect()
        }, this.connectRetryCount * 500)
      }
      this.ws.onmessage = (msg) => {
        console.log('从服务端获取到数据了')
        // 真正服务端发送的数据在msg中的data中
        console.log(msg.data)

        const recvData = JSON.parse(msg.data)
        const socketType = recvData.socketType
        // 判断回调函数是否存在
        if (this.callBackMapping[socketType]) {
          const action = recvData.action
          if (action === 'getData') {
            const realData = JSON.parse(recvData.data)
            this.callBackMapping[socketType].call(this, realData)
          } else if (action === 'fullScreen') {
            this.callBackMapping[socketType].call(this, recvData)
          // eslint-disable-next-line no-empty
          } else if (action === 'themeChange') {
          }
        }
      }
    }

    // 注册回调函数
    // 第一个参数：回调函数的唯一标识 ，第二个参数：调用的函数
    registerCallBack (socketType, callBack) {
      this.callBackMapping[socketType] = callBack
    }

    // 取消回调函数
    unRegisterCallBack (socketType) {
      this.callBackMapping[socketType] = null
    }

    // 发送数据的方法
    send (data) {
      // 需要先判断是否连接上服务端，然后才发送数据
      if (this.connected) {
        this.sendRetryCount = 0
        this.ws.send(JSON.stringify(data))
      } else {
        // 延迟一下
        this.sendRetryCount++
        setTimeout(() => {
          this.send(data)
        }, this.sendRetryCount * 500)
      }
    }
}
